<!--
 * new page
 * @author: dh
 * @since: 2023-12-20
 * Menu.vue
-->
<template>
  <div class="container">
    <el-menu
      :router="true"
      active-text-color=" rgba(17, 93, 239, 1)"
      :default-active="defaultActive"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item
        v-for="item in comRoute"
        :key="item.path"
        :index="item.path"
      >
        <el-icon>
          <component class="icons" :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { routes } from "@/router/index";



const comRoute:any = computed(() => {
  const layoutRoute = routes.find((route) => route.name === "Layout");
  return layoutRoute?.children;
});

const defaultActive = ref<string>("/home");
const handleOpen = (key: string) => {
  defaultActive.value = key;
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
:deep(.el-menu) {
  border-right: solid 0px var(--el-menu-border-color);
}
</style>
